<template>
	<div class="pie_chart" :id="idName">饼形图</div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref, toRefs, computed, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import storageHelper from "@/libs/StorageHelper";
let user_id = storageHelper.getUserInfo().user_id;
let router = useRouter();
const props = defineProps({
  idName: {
    type: String,
    default: "barChart",
  },
  title: {
		type: String,
		default: "XXX饼状图"
	},
	list: {
		type: Array,
		required: true
	},
	type: {
		type: String,
		default: "参数"
	},
});
let { idName, title, list, type } = toRefs(props);
let option=ref({
	title: {
		text: "上传商品分类数比",
		left: "center",
	},
	tooltip: {
		trigger: "item",
		formatter: '{a} <br/>{b} : {c} ({d}%)'
	},
	legend: {
		orient: "vertical",
		left: "left",
	},
	series: [{
		name: "",
		type: "pie",
		radius: "50%",
		data: [],
		emphasis: {
			itemStyle: {
				shadowBlur: 10,
				shadowOffsetX: 0,
				shadowColor: "rgba(0, 0, 0, 0.5)",
			},
		},
	}],
})
const series = computed(() => {
	let listObj = vm.value.names;
	let values = vm.value.values;
	let seriesobj = [];
	let labelOption = {
		show: true,
		position: "insideBottom",
		distance: 15,
		align: 'left',
		verticalAlign: 'middle',
		rotate: 90,
		formatter: '{c}  {name|{a}}',
		fontSize: 16,
		rich: {
			name: {}
		}
	};
	for (let i=0;i<listObj.length;i++){
		let data = []
		for (let j=0;j<values.length;j++){
			data.push(values[j][i]);
		}
		let dict_type = {
				name: listObj[i],
				type: 'bar',
				barGap: 0,
				label: labelOption,
				emphasis: {
					focus: 'series'
				},
				data: data
		}
		seriesobj.push(dict_type);
	}
	return seriesobj;
});
let init_chart = () => {
	let optionObj = option.value;
	let typeObj = type.value;
	let titleObj = title.value;
	if (titleObj) {
		optionObj.title.text = titleObj;
	}

	// 分类名
	if (typeObj) {
		optionObj.series[0].name = typeObj;
	}

	// 参数
	optionObj.series[0].data = list.value;
	let myChart = echarts.init(document.getElementById(idName.value));
	myChart.setOption(optionObj);
};
watch(list, (newValue, oldValue) => {
  if (newValue) {
    init_chart();
  }
});
onMounted(() => {
	setTimeout(()=>{
	 init_chart();
	},200)

});
</script>

